<template>
    <div class="app-container">
        <!-- 左侧内容区 -->
        <el-form :model="ruleForm" label-width="120px">
            <div class="form-wrapper">
                <h3 class="section-title">处理详情</h3>

                <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
                    <!-- Tabs -->
                    <el-tab-pane label="请求人信息" name="0">
                        <!-- 请求人信息内容 -->
                        <h3 class="section-title">诉求人信息</h3>
                        <div class="form-section">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="登记时间: ">
                                        <span>{{ ruleForm.createTime }}</span>
                                    </el-form-item>
                                </el-col>
                                <!-- <el-col :span="24">
                                    <el-form-item label="分流窗口: ">
                                        {{ ruleForm.demandsSysUserName }}
                                    </el-form-item>
                                </el-col> -->
                                <el-col :span="24">
                                    <el-form-item label="姓名: ">
                                        {{ ruleForm.demandsName }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="性别: ">
                                        {{ ruleForm.demandsSexNmae }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="身份证号: ">
                                        {{ ruleForm.demandsCardno }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="家庭住址或单位: ">
                                        {{ ruleForm.demandsAvatar }}
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="窗口登记信息" name="1">
                        <h3 class="section-title">窗口登记信息</h3>
                        <!-- 窗口登记信息内容 -->
                        <div class="form-section">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="简要事由: ">
                                        {{ ruleForm.checkinSummary }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="纠纷类型: ">
                                        {{ ruleForm.checkinDictJflxName }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="手机号: ">
                                        {{ ruleForm.checkinPhonenumber }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="处理部门: ">
                                        {{ ruleForm.checkinDeptName }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="窗口经办人: ">
                                        {{ ruleForm.checkinExperiencedSysUserName }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="接收人姓名：">
                                        {{ ruleForm.receptionName }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="接收人手机号：">
                                        {{ ruleForm.receptionPhone }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="备注: ">
                                        {{ ruleForm.checkinRemark }}
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="部门处理信息" name="2">
                        <h3 class="section-title">部门处理信息</h3>
                        <!-- 部门处理信息内容 -->
                        <div class="form-section">
                            <el-form-item label="上传附件: " prop="file">
                                <FileUpload :value="ruleForm.deptdisposeFile" :disabled="true" :showTip="false" />
                            </el-form-item>
                            <h3 class="section-title">案件相关身份信息</h3>
                            <el-table :data="mdjfCasePersonList" border>
                                <el-table-column type="index" label="序号" width="50"></el-table-column>
                                <el-table-column prop="casePersonName" label="姓名" width="150">
                                    <template slot-scope="scope">
                                        {{ scope.row.casePersonName }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="casePersonPhonenumber" label="手机号" width="250">
                                    <template slot-scope="scope">
                                        {{ scope.row.casePersonPhonenumber }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="casePersonCardno" label="身份证号" width="350">
                                    <template slot-scope="scope">
                                        {{ scope.row.casePersonCardno }}
                                    </template>
                                </el-table-column>

                            </el-table>
                            <!-- <el-form-item label="部门经办人" prop="checkinExperiencedSysUserId">
                                <el-select v-model="ruleForm.checkinExperiencedSysUserId" style="width: 100%"
                                    placeholder="请选择部门经办人">
                                    <el-option v-for="(item, index) in deptUser" :value="item.userId"
                                        :label="item.userName" :key="index"></el-option>
                                </el-select>
                            </el-form-item> -->
                            <h3 class="section-title" style="margin-top: 40px;">部门回访信息</h3>
                            <el-form-item label="回访时间：">
                                {{ ruleForm.deptdisposeReturnTime }}
                            </el-form-item>
                            <el-form-item label="回访内容：">
                                {{ ruleForm.deptdisposeReturnInfo }}
                            </el-form-item>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="预警信息" name="3">
                        <h3 class="section-title">案件状态</h3>
                        <div class="form-section">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="处理时间: ">
                                        <span>{{ ruleForm.createTime }}</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="处理状态: ">
                                        {{ ruleForm.deptdisposeReturnIs == 0 ? '已回访' : '未回访' }}
                                    </el-form-item>
                                </el-col>

                            </el-row>
                            <h3 class="section-title">预警信息</h3>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="预警时间: ">
                                        {{ ruleForm.disposeWarningTime }}
                                    </el-form-item>
                                </el-col> </el-row>
                            <h3 class="section-title">督办信息</h3>
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-form-item label="督办时间: ">
                                        {{ ruleForm.supervisingTime }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="督办部门: ">
                                        {{ ruleForm.supervisingSysUserName }}
                                    </el-form-item>
                                </el-col>
                                <!-- <el-col :span="24">
                                    <el-form-item label="督办附件: ">
                                        {{ ruleForm.demandsAvatar }}
                                    </el-form-item>
                                </el-col> -->
                            </el-row>
                            <h3 class="section-title">补充资料</h3>
                            <el-row :gutter="20" v-if="mdjfCaseBczlList && mdjfCaseBczlList.length > 0">
                                <el-col :span="24">
                                    <el-form-item label="补充时间: ">
                                        {{ mdjfCaseBczlList[mdjfCaseBczlList.length - 1].createTime }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="补充内容: ">
                                        {{ mdjfCaseBczlList[mdjfCaseBczlList.length - 1].bcInfo }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="附件: ">
                                        <FileUpload :value="mdjfCaseBczlList[mdjfCaseBczlList.length - 1].bcFile"
                                            :disabled="true" :showTip="false" />
                                    </el-form-item>

                                </el-col> </el-row>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-form>
    </div>
</template>
<script>
import { listNoAuth, getAccept, } from "@/api/aapal";
import { getInfo } from "@/api/login";
export default {
    data() {
        return {
            mdjfCasePersonList: {
                caseMainId: "",
            },
            deptUser: "",
            activeTab: "0",
            ruleForm: {},
            fileData: "",
            mdjfCaseBczlList: []
        };
    },
    mounted() {
        this.getUserInfo();
        this.getAcceptData(this.$route.query.id);
    },

    methods: {
        handleTabClick(tab) {
            // 在这里可以处理标签点击事件
        },
        getDeptUer() {
            listNoAuth({ deptId: this.deptId }).then((res) => {
                this.deptUser = res.rows;
            });
        },
        getUserInfo() {
            getInfo().then((res) => {
                // this.windowName = res.user.nickName
                // this.ruleForm.demandsSysUserId = res.user.userId
                // this.deptName = res.user.dept.deptName
                this.deptId = res.user.dept.deptId;
                // this.ruleForm.checkinDeptId = this.deptId
                this.getDeptUer();
            });
        },
        getAcceptData(id) {
            getAccept(id).then((response) => {
                this.ruleForm = response.data;
                this.mdjfCaseBczlList = response.data.mdjfCaseBczlList;
                this.mdjfCasePersonList = response.data.mdjfCasePersonList;
            });
        },
    },
};
</script>

<style scoped>
.app-container {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.form-wrapper {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
}

.el-tabs {
    width: 100%;
}

.el-tab-pane {
    padding: 20px;
    border-radius: 6px;
}

.form-section {
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 15px;
}

.section-title {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: bold;
    color: #3c82f5;
    border-left: 4px solid #3c82f5;
    padding-left: 10px;
}
</style>
